<template>
   <div class="add_edit">
      <el-dialog title="添加换电产品" center :before-close="handleClose" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="form">
                <el-form-item label="产品名称：" :label-width="formLabelWidth">
                   <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品编码：" :label-width="formLabelWidth">
                   <el-input v-model="form.code" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品图片：" :label-width="formLabelWidth">
                   <el-upload
                    class="avatar-uploader"
                    :action="imageuploadurl"
                    :show-file-list="false"
                    :headers="importHeaders"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="区间开始时间：" :label-width="formLabelWidth">
                    <el-time-picker
                    style="width:100%"
                        arrow-control
                        v-model="form.time1"
                        placeholder="任意时间点">
                    </el-time-picker>
                </el-form-item>
                <el-form-item label="区间结束时间：" :label-width="formLabelWidth">
                    <el-time-picker
                       style="width:100%"
                        arrow-control
                        v-model="form.time2"
                        placeholder="任意时间点：">
                    </el-time-picker>
                </el-form-item>
                <el-form-item label="单价：" :label-width="formLabelWidth">
                   <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="服务费：" :label-width="formLabelWidth">
                   <el-input v-model="form.servicePrice" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onSave">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
            </el-dialog>
   </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogFormVisible: true,
        form: {
          name: '',
          time1: '',
          time2: '',
          code: '',
          price: '',
          servicePrice:''
        },
        imageuploadurl:this.$global.serverIp + 'admin/upload/uploadProfile',
        importHeaders:'',
        formLabelWidth: '120px',
        imageUrl:'',
        resultImg:''
      }
    },
     methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.$emit('isAdd')
          })
          .catch(_ => {});
      },
      cancel(){
           this.$emit('isAdd')
      },
      handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.resultImg = file.response.data
			},
			beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
			    if (!isJPG) {
			      this.$message.error('上传头像图片只能是 JPG 格式!');
          }
			    if (!isLt2M) {
			      this.$message.error('上传头像图片大小不能超过 2MB!');
			    }
			    return isJPG && isLt2M;
      },
      getTime(time){
         var hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
         var minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
         var seconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
         return hours + ':' + minutes + ':' + seconds
      },
      onSave(){
        var self = this
        var reg = /^\d+(\.\d{1,2})?$/
        if(endTime < startTime){
           self.$popup.open('结束不得小于开始时间')
           return;
        }
        if(self.form.name == ''){
          self.$popup.open('产品名称不能为空')
          return;
        }
        if(self.form.code == ''){
          self.$popup.open('产品编号不能为空')
          return;
        }
        if(self.resultImg == ''){
          self.$popup.open('图片不能为空')
          return;
        }
        if(self.form.time1 == ''){
          self.$popup.open('区间开始时间不能为空')
          return;
        }
        if(self.form.time2 == ''){
          self.$popup.open('区间结束时间不能为空')
          return;
        }
        if(self.form.price == ''){
          self.$popup.open('单价不能为空')
          return;
        }
        if(self.form.servicePrice == ''){
          self.$popup.open('服务费不能为空')
          return;
        }
        if(!reg.test(self.form.price) || !reg.test(self.form.servicePrice)){
            self.$popup.open('只能输入正数，小数最多保留两位！')
            return;
        }
        var startTime = self.getTime(new Date(self.form.time1))
        var endTime = self.getTime(new Date(self.form.time2))
        this.$axios.post(this.$global.serverIp + 'order/product/save', {
		  'name':self.form.name,
          'productCode':self.form.code,
          'pic':'http://122.228.189.214:18099/admin/' + self.resultImg,
          'serviceCharge':self.form.servicePrice,
          'price':self.form.price,
          'startTime':startTime,
          'endTime':endTime
        }).then(res =>{
          self.$message.success('添加成功')
          this.$emit('isAdd','0')
        })
      },
    },
    
    mounted(){
      this.importHeaders = {Authorization: 'Bearer ' + localStorage.getItem('token')};
    },
    
  };
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>